<template>
<div id="home">
  <navbar class="navbar"><h2 slot="center">购物中心</h2></navbar><!-- 导航栏 -->
  <tabcontrol :titles="['流行','新款','精选']" @tabcontrol="tabcontrol" v-show="lv" ref="tabcontrol2"></tabcontrol>
  <scroll class="wrapper" ref="scroll" :probeType="3"  @scroll="getPostion" @pullUpload="pullUpload">  <!--滚动的插件 -->
    <homeswiper :banners="banners" @swiperimgload='swiperimgload'></homeswiper><!-- 轮播图组件 -->
    <recommpendview :recommends="recommends"></recommpendview><!-- 活动图标 -->
    <imgview></imgview><!-- 本周流行 -->
     <tabcontrol :titles="['流行','新款','精选']" @tabcontrol="tabcontrol" ref="tabcontrol" v-show="!lv"></tabcontrol><!--切换流行新款精选 -->
     <goodlist :goods="goods[goodsss].list"></goodlist> <!-- 30个产品页面 -->
  </scroll>
   <backtop @click.native="backtopclick" v-show="y"></backtop><!--一键返回顶部组件 -->


</div>
</template>

<script>
import{getHomeMultidata,getHomeGoods} from '../../network/home'  //这是Ajax请求数据


import navbar from '../../components/common/navber/navbar.vue'//导航栏的组件
import homeswiper from './child/homeswiper.vue'   //首页录播图组件
import recommpendview from './child/Recommendview.vue'//4个活动图标组件
import imgview from '../home/child/imgview.vue' //本周流行组件
import tabcontrol from '../../components/content/tabcontrol/tabcontrol.vue'//流行，新款，销量TAB
import goodlist from'../../components/content/goods/z1.vue'//推荐的商品
import scroll from'../../components/common/scroll/scroll.vue'//封装好的滚动插件
// import backtop from'../../components/content/backTop/backTop.vue'
import {backTopMixin} from'../../common/mixin.js'
export default {
  name:"home",
  components:{
    navbar,
    homeswiper,
    recommpendview,
    imgview,
    tabcontrol,
    goodlist,
    scroll,
    // backtop
  },
	mixins:[backTopMixin],
  data(){
    return{
      banners:[],
      recommends : [],
      goods:{
        'pop':{page: 0, list: []},
        'new':{page: 0,list: []},
        'sell':{page: 0,list:[]}
      },
      goodsss:'pop',
      //y:false,//判断一键回顶健是否显示
      lv:false,//判断第一个‘切换流行新款精选’插件是否显示
      x:545,
      p:0
    }
  },
  created(){
    //请求多个数据
    this.getHomeMultidata()
//  getHomeMultidata().then(res =>{
//         console.log(res);
//         this.banners = res.data.banner.list;
//         this.recommends = res.data.recommend.list;
//       }),

    //请求商品数据
    this.getHomeGoodss('pop')
    this.getHomeGoodss('new')
    this.getHomeGoodss('sell')
//  getHomeGoods('pop',1).then(res=>{//调用methods里的getHomeGoods方法
//           console.log(res);
//           console.log('22');
//           this.goods.pop.list.push(...res.data.data.list)
//         })



    // this.$bus.$on('goodsimg',()=>{//事件总线
    //   this.$refs.scroll.scroll.refresh()//refresh()是根据现在的高度决定滚动的距离。
    //   //this.$refs.scroll && this.$refs.scroll.refresh()  
    // })
  },
  mounted(){

   
    // this.$bus.$on('goodsimg',()=>{
    //   let a1 =false
    //   if(!a1){
    //     a1=true
    //     setTimeout(() =>{
    //       console.log('22');
    //       // console.log(this.$refs);
    //       // console.log(this.$refs.scroll);
    //       // console.log(this.$refs.scroll.scroll);
    //       // this.$refs.scroll.scroll.refresh();
    //       a1=false
    //       },1000)
    //   }
    //  // this.$bus.$on('goodsimg',()=>{//事件总线
    //  //this.$refs.scroll.scroll.refresh()//refresh()是根据现在的高度决定滚动的距离。 
    //})

     const refresh =this.debounce(this.$refs.scroll.refresh,50) //该节流方法需要在scroll.vue文件中封装refresh函数，不然直接调用会找不到，wrapper挂载的dom元素
     this.$bus.$on('goodsimg',()=>{
       refresh()
     })

    

  },
  activated(){//进入之前跳转到之前的位置
    this.$refs.scroll.scrollto(0,this.p,1)
  },
  deactivated(){//离开之前记录位置
    this.p=this.$refs.scroll.scroll.y
  },



  methods:{
     debounce(func,delay){//封装的节流阀，在一次操作后，一定时间没有再次操作才执行方法
       let timer=null
       return function (...args){
         if(timer) clearTimeout(timer)
         timer = setTimeout(()=>{
           func.apply(this,args)
         },delay)
       }
     },
       swiperimgload(){//获取组件距离顶部的距离
         this.x=this.$refs.tabcontrol.$el.offsetTop
       },

       getHomeMultidata(){//将获取的数据进行处理
         getHomeMultidata().then(res =>{
         console.log('这是之前接口的数据');
         this.banners = res.data.banner.list;
         this.recommends = res.data.recommend.list;
       })
       }
      ,
       getHomeGoodss(type){//网络请求首页的数据
         const page = this.goods[type].page+1//这里不能使用(.属性名)要使用中括号[]因为[]可以放变量 这里的type属于一个变量
         getHomeGoods(type,page).then(res => {
           console.log('这是花9块钱买的接口');console.log(res);     
           this.goods[type].list.push(...res.data.data.list);
          console.log(typeof type);
           this.goods[type].page += 1
         })
       },

       tabcontrol(index){//根据用户点击了哪个发送对应的数据请求
         switch (index) {
           case 0:
             this.goodsss='pop'
             break;
           case 1:
             this.goodsss='new'
             break;
           case 2:
             this.goodsss='sell'
             break;    
         }
         this.$refs.tabcontrol2.a1=index
         this.$refs.tabcontrol.a1=index
       },

      //  backtopclick(){//调用ref:scroll文件里的scrollto方法，(a1,a2,a3)三割参数分别是回顶部X,Y轴距离和需花费的时间
      //        this.$refs.scroll.scrollto(0,0,500);
      //  },

       getPostion(postion){//监听滚动事件
         this.y = -postion.y > 300//设置一键回顶部的图标在什么时候显示隐藏
         this.x < -(postion.y)?this.lv=true:this.lv=false;//判断‘切换流行新款精选’插件是否显示
        //  if(-postion.y>this.x)
        //  {this.lv=true}
        //  else{this.lv=false}
       },

        pullUpload(){//下拉刷新
          this.getHomeGoodss(this.goodsss)
          this.$refs.scroll.scroll.finishPullUp()
        }
  }
}
</script>

<style scoped>
.navbar{

  /* display: flex; */
  height: 44px;
  line-height: 44px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  background: pink;
  
}
#home{
  margin-top: 44px;
  height: 100vh;/* 避免被.wrapper撑高 */
}
.wrapper{
height:calc(100% - 93px);
overflow: hidden;
}
</style>